﻿
@{
    Layout = null;
}

<style>
    .big-con {
        padding: 10px;
        background-color: #F0F0F0;
    }

    .title {
        font-weight: 400;
        font-size: 45px;
        background-color: #00CCCC;
        width: 230px;
        height: 82px;
        line-height: 62px;
        text-align: center;
        padding: 10px 20px;
    }

    .smallTitle {
        font-size: 25px;
        padding-bottom: 6px;
        border-bottom: solid 1px #797979;
        margin-top: 20px;
    }

    .big-con {
        display: flex;
        margin-top: 15px;
    }

        .big-con .left {
            width: 20%;
        }

            .big-con .left > img {
                width: 100%;
                height: 100%;
            }

        .big-con .right {
            width: 75%;
            margin-left: 2%;
        }

            .big-con .right > p {
                display: flex;
                align-items: center;
                margin-top: 20px;
            }

                .big-con .right > p > span {
                    font-size: 18px;
                }

                .big-con .right > p > input {
                    margin-left: 20px;
                    width: 40%;
                    height: 34px;
                }

            .big-con .right .upImg {
                display: flex;
                margin: 15px 0;
                align-items: center;
            }

                .big-con .right .upImg img {
                    width: 85px;
                    height: 85px;
                }

                .big-con .right .upImg > div {
                    margin-left: 20px;
                }

                    .big-con .right .upImg > div > div#upImg {
                        padding: 5px;
                        border: 1px solid #797979;
                        text-align: center;
                        height: 30px;
                        border-radius: 3px;
                        position: relative;
                    }

                        .big-con .right .upImg > div > div#upImg > div {
                            width: 100%;
                            height: 100%;
                            position: absolute;
                            line-height: 28px;
                            top: 0;
                            left: 0;
                        }

                        .big-con .right .upImg > div > div#upImg > input {
                            width: 100%;
                            height: 100%;
                            position: absolute;
                            margin: 0;
                            padding: 0;
                            opacity: 0;
                            top: 0;
                            left: 0;
                        }

    .btn-primary; {
        padding: 5px 20px;
    }
</style>
<form action="/" method="post">
    <div class="big-con">
        <div class="left">
            <img src="~/Content/webImgs/Market/CreateActivities/zguan.png" alt="" >
        </div>
        <div class="right">
            <div class="smallTitle" style="color: #e6342e">添加促销海报图片</div>
            <div class="upImg">
                <img src="~/Content/webImgs/Market/CreateActivities/u1464.png" alt="" style="border-radius:5px;">
                <div>
                    <div id="upImg">
                        <div>上传促销海报图片</div>
                        <input id="UpImg" type="file" name="upImg" value="上传促销海报图片 " />
                    </div>

                    <p style="margin:5px 0">（建议尺寸640x1280px, Jpg  png）</p>
                </div>
            </div>
            <div class="smallTitle" style="color: #e6342e">文字编辑</div>
            <div class="row">
                <div class="col-md-1 text-center">标题：</div>
                <div class="col-md-6">
                <input type="text" name="title" class="form-control">
                </div>
            </div>
            <div class="row">
                <div class="col-md-1 text-center">日期：</div>
                <div class="col-md-6">
                    <input type="text" name="day" class="form-control">
                </div>
            </div>
            <div class="row">
                <div class="col-md-1 text-center">规则：</div>
                <div class="col-md-6">
                    <input type="text" name="rugular" class="form-control">
                </div>
            </div>
          
            <button type="submit" class="btn btn-primary">确定</button>
            <a class="btn btn-default" href="javascript:$.MGJ.Common.loadurl(this, '@Url.Action("CreateTemplate", "Market")')">返回</a>


        </div>
    </div>
</form>
<script>
    $(function () {
        //修改用户头像  监听是否有文件被选中
        document.getElementById('UpImg').onchange = function () {

            //判断一下文件长度可以确定用户是否真的选择了文件，如果点了取消则文件长度为0
            //console.log(this.files[0]);//文件列表
            if (this.files.length !== 0) {
                // var url = URL.createObjectURL(this.files[0]);//获取文件的本地路径;
                var fileName = this.files[0].name;
                var url = URL.createObjectURL(this.files[0]);//获取文件的本地路径;
                $('.upImg > img').attr('src', url);

            }
        };
    })

</script>